<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <title>Waiting - localtags</title>
  
  <link rel="stylesheet" href="/public/bootstrap.min.css">
  <link rel="stylesheet" href="/public/bootstrap-icons-141.css">
  <link rel="stylesheet" href="/public/style-light.css">
  
  <script src="/public/jquery.min.js"></script>
  <script src="/public/dayjs.min.js"></script>
  <script src="/public/bootstrap.bundle.min.js"></script>
  <script src="/public/util.js"></script>

  <style>
    .bi-tag {
      cursor: pointer;
      margin-right: 0.5rem;
    }
    .SameName {
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="root" class="container" style="max-width: 775px; min-width: 400px;"></div>
<script>

const idHash = {}; // id-hash 对应表。

let waitingFolder;
let oldTags;

const Alerts = CreateAlerts();

const [InfoBtn, InfoMsg] = CreateInfoPair('使用说明', m('ul').append([
  m('li').text('可随时在 waiting 文件夹中添加、删除文件或更改文件名。'),
  m('li').text('但每当在 waiting 文件夹中添加、删除文件或更改文件名后，请刷新本页面以反映最新情况。'),
  m('li').text('按 F12 进入控制台输入命令 where() 可查看 waiting 文件夹的完整路径。'),
  m('li').text('单个文件上限默认 512MB (可在 config.json 中设置), 大文件请用压缩软件分卷后上传。'),
]));

const Navbar = {
  view: () => m('nav').addClass('navbar navbar-light bg-light').append([
    m('div').addClass('container-fluid').append([
      m('a').attr({title:'go back',type:'button',href:'/light/add'})
        .addClass('btn btn-outline-dark').append(m('i').addClass('bi bi-arrow-left')),
      m('span').addClass('navbar-brand').append([
        'Waiting', ' ', m(InfoBtn),
      ]),
      m('a').attr({title:'tags',href:'/light/tags',target:'_blank',type:'button'})
        .addClass('btn btn-outline-dark').append(
          m('i').addClass('bi bi-tags')
      ),
    ]),
  ]),
};

const Tags = cc('textarea');
const SetTagsBtn = cc('button');
const TagsArea = cc('div', null, [
  m(Tags).addClass('form-control').attr({placeholder:'tags...'}),
  m('p').addClass('text-end mt-2').append([
    m(SetTagsBtn).text('set').addClass('btn btn-outline-primary').attr({type:'button'}),
  ]),
]);

const FileList = cc('div');

const SubmitAlerts = CreateAlerts();
const SubmitLoading = cc('div');

const SubmitBtn = cc('button');
const SubmitBtnAera = cc('p', null, [
  m(SubmitLoading).addClass('text-center').hide().append([
    m('div').addClass('spinner-border text-primary').attr({role:'status'}).append(
      m('span').addClass('visually-hidden').text('Loading...')
    ),
  ]),
  m(SubmitBtn).text('Submit').addClass('btn btn-primary').attr({type:'button'}),
])

const Files = cc('p');

$('#root').append([
  m(Navbar).addClass('mt-2 mb-5'),
  m(InfoMsg).hide(),
  m(Loading),
  m(TagsArea).hide(),
  m(Spacer),
  m(Alerts),
  m(FileList).addClass('my-3'),
  m(SubmitAlerts).addClass('my-3'),
  m(SubmitBtnAera).addClass('text-center').hide(),
  m(Files).addClass('text-center').append(
    m('a').text('Files').attr({href: '/light/files'}).addClass('fs-5'),
  ).hide(),
  m(BottomLine),
]);

function where() {
  console.log(waitingFolder);
}

init()

function init() {
  ajax({method:'GET',url:'/api/waitingFolder',alerts:Alerts},
    (resp) => { waitingFolder = resp.message });

  $(SetTagsBtn.id).click(() => {
    const tagsArr = tagsStringToArray($(Tags.id).val());
    const tagsText = addPrefix(tagsArr, '#');
    if (tagsText == oldTags) {
      Alerts.insert('info', '标签无变化');
      return;
    }
    const body = new FormData();
    body.append('tags', JSON.stringify(tagsArr));
    ajax({method:'POST',url:'/api/set-waiting-tags',alerts:Alerts,buttonID:SetTagsBtn.id,body:body},
        () => {
          $('.Tags').text(tagsText);
          oldTags = tagsText;
          $('.TagsArea').show();
          $('.col .input-group').hide();
        });
  });

  $(SubmitBtn.id).click(() => {
    if (!checkTags()) {
      return;
    }
    $(SubmitLoading.id).show();
    const longTime = window.setTimeout(() => {
      SubmitAlerts.insert('info', '正在执行定期校验，请耐心等待......');
    }, 3000);
    ajax({method:'POST',url:'/api/add-files',alerts:SubmitAlerts,buttonID:SubmitBtn.id},
      () => {
        $(TagsArea.id).hide();
        $(SubmitBtnAera.id).hide();
        $('.bi-tag').hide();
        $(Files.id).show();
        disable('.SameName');
        SubmitAlerts.insert('success', 'OK');
      }, null, () => {
        $(SubmitLoading.id).hide();
        window.clearTimeout(longTime);
      });
  });

  ajax({method:'GET',url:'/api/waiting-files',alerts:Alerts},
    (files) => {
      // onSuccess
      if (!files || files.length == 0) {
        Alerts.insert('info', '没有待上传文件');
        return;
      }
      $(TagsArea.id).show();
      $(SubmitBtnAera.id).show();
      let hasSameName = false;
      files.forEach(file => {
        idHash[file.ID] = file.Hash;
        const item = FileItem(file);
        $(FileList.id).prepend(m(item));
        item.init();
        if (file.Count > 0) hasSameName = true;
      });
      if (hasSameName) {
        Alerts.insert('primary', '发现重名文件，已为重名文件自动设置标签，如果更改标签，数据库中的同名文件也会随之同时更改标签。');
      }
      window.setTimeout(() => { $(Tags.id).focus(); }, 200);
    }, null, () => {
      // onAlways
      Loading.hide();
    });
}

// checkTags 返回 false 表示标签不符合要求，返回 true 表示标签没问题。
function checkTags() {
  for (const elem of $('.Tags')) {
    const tagsSet = tagsStringToSet(elem.innerText);
    if (tagsSet.size < 2) {
      SubmitAlerts.insert('danger', '每个文件至少需要 2 个标签');
      return false;
    }
  }
  return true;
}

function FileItem(file) {
  let thumbClass;
  if (file.Thumb) {
    thumbClass = 'col-md-2 col-2';
    file.Thumb = getTempThumb(file.ID);
  } else {
    thumbClass = 'col-md-2 col-1';
    file.Thumb = getThumbByFiletype(file.Type);
  }

  const cardSubtitle = `(size: ${fileSizeToString(file.Size)})`;

  let displaySameName = 'none';
  if (file.Count > 0) {
    displaySameName = 'inline';
  }

  const self = cc('div', file.ID);

  self.view = () => m('div').attr({id: self.raw_id}).addClass('FileItem card mb-3').append([
    m('div').addClass('row g-0').append([
      m('div').addClass(thumbClass).append([
        m('img').addClass('card-img ').attr({src: file.Thumb}),
      ]),
      m('div').addClass('col').append([
        m('div').addClass('card-body d-flex flex-column h-100').append([
          m('p').addClass('small text-muted mb-0').append([
            m('span').text(cardSubtitle), ' ',
            m('span').text('重名').addClass('SameName text-warning bg-light px-1')
              .css('display', displaySameName).attr({title:'点击该按钮，按功能键 F12 打开控制台查看说明'})
              .click(() => {
                console.log(`输入命令 replace_file('${file.ID}') 可替换文件[${file.Name}]`);
              }),
          ]),
          m('p').addClass('card-text text-break mb-2').text(file.Name),
          m('div').addClass('TagsArea mt-auto').append([
            m('i').addClass('bi bi-tag').attr({title:'edit tags'}),
            m('span').addClass('Tags small text-muted text-break').text(addPrefix(file.Tags, '#')),
          ]),
          m('div').addClass('input-group mt-auto').hide().append([
            m('input').addClass('TagsInput form-control'),
            m('button').text('ok').addClass('OK btn btn-outline-secondary').attr({type:'button'}),
          ]),
        ]),
      ]),
    ]),
  ]);

  // 有些事件要在该组件被实体化之后添加才有效。
  self.init = () => {
    const tagsArea = $(self.id + ' .TagsArea');
    const tagsText = $(self.id + ' .Tags');
    self.oldTags = tagsText.text();
    const tagsInput = $(self.id + ' .TagsInput');
    const inputGroup = $(self.id + ' .input-group');

    const okBtnID = self.id + ' .OK';
    $(okBtnID).click(() => {
      const tagsArr = tagsStringToArray(tagsInput.val());
      const tagsArrText = addPrefix(tagsArr, '#');
      if (tagsArrText == self.oldTags) {
        inputGroup.hide();
        tagsArea.show();
        return;
      }
      const body = new FormData();
      body.append('hash', idHash[self.raw_id]);
      body.append('tags', JSON.stringify(tagsArr));
      ajax({method:'POST',url:'/api/set-waiting-tag',alerts:Alerts,buttonID:okBtnID,body:body},
          () => {
            inputGroup.hide();
            tagsArea.show();
            tagsText.text(tagsArrText);
            self.oldTags = tagsArrText;
            oldTags = '';
          }, (that) => {
            if (that.responseText.indexOf('not found')) {
              Alerts.insert('danger', 'not found: ' + $(self.id + ' .card-text').text());
            } else {
              Alerts.insert('danger', that.responseText);
            }
          });
    });
    
    $(self.id + ' .bi-tag').click(() => {
      tagsArea.hide();
      inputGroup.show();
      tagsInput.val(tagsText.text()).focus();
    });  
  }

  return self;
}

function replace_file(id) {
  const hash = idHash[id.toUpperCase()];
  if (!hash) {
    SubmitAlerts.insert('danger', `找不到文件 [id:${id}]`);
    return;
  }
  const body = new FormData();
  body.append('id', id);
  body.append('hash', hash);

  disable(SubmitBtn.id)
  ajax({method:'POST',url:'/api/replace-file',alerts:SubmitAlerts,body:body},
      () => {
        const filename = $('#'+id+' .card-text').text();
        console.log('文件替换成功: ' + filename);
        console.log('本页会自动刷新......');
        window.setTimeout(() => {window.location.reload()}, 3000);
      }, () => {
        enable(SubmitBtn.id);
      });
}

</script>
</body>
</html>